<template>
  <div class="box">
    <div class="header">
      <van-nav-bar left-arrow  @click-left="onClickLeft">
        <template #right>
          <van-search shape="round" placeholder="请输入搜索关键词" @click-input="ChangeInput" />
        </template>
      </van-nav-bar>
    </div>
    <div class="bottom">
      <FirstCate :data="first" :list="list" :titels="titels"  ref="CateRef" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { getcateList } from '@/api';
import FirstCate from './components/catagory-list.vue';
import CateType from '@/enums/index';
import router from '@/router';

// 调用接口 加载函数
const first = ref<firstCate[]>([]);
const list  =ref([]);
const titels =ref([])
const CateRef = ref<cateItem | null>(null)
const titel = computed(() => {
  return CateRef.value?.cateItem.titleName     
})


function onClickLeft(){
  router.back();
}
function  ChangeInput(){
  router.push('search')

  
}
defineOptions({
  name:'catagory'
})
async function onLoad(name: string) {
 
 
  const code = await getcateList(name)
  const tmp1 = code.firstCate.splice(1);
  //@ts-ignore
  const tmp2 = []
  const tmp3 = tmp1.forEach(i => {
    //@ts-ignore
    return tmp2.push(i.title)
  })
  //@ts-ignore
  first.value = tmp2

   if(name==='category1'){
      //@ts-ignore
    code.secondCate.level1words.shift();

   }

     
      //@ts-ignore
    list.value=code.secondCate.level1words

  
}
//  onLoad();

watch(
  () => CateRef.value?.cateItem.titleName,
  () => {
    //@ts-ignore
    onLoad(CateType[titel.value]);
  }
) 
</script>

<style scoped>
.box {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  height: 44px;
  background-color: aqua;
  position: relative;
}

.bottom {
  flex: 1;
  overflow: auto;
  display: flex;
}




.active {
  color: red;
}

::v-deep(.van-search) {
  padding: 0;
  width: 294px;
}

::v-deep(.van-nav-bar__right) {
  left: 20px;
}

/* :deep .van-nav-bar__left  {
  left:-10px ;
  font-size: 16px !important;
  color: black !important;
  
} */
::v-deep(.van-nav-bar__arrow) {
  font-size: 20px;
  color: #5d5f6a;
  left: -10px;
  font-weight: 600;
  width: 20px;
}

::v-deep(.van-icon-search) {
  color: #ccc;
}
</style>
